<template>
  <div class="m-collapse-panel"
  :class="{'active':active,'fix-height':fixHeight,'no-transition':!transition}"
  @click='clickPanel()'>
    <div class="row middle-xs">
      <div class="col-xs-10">
        <div class="row">
          <slot name="mainContent">

          </slot>
        </div>
      </div>
      <div class="col-xs-2 arrow-down-content" v-if="hasCollapse" @click="arrowClick">
        <div class="arrow-down" :class="{'reverse':collapseShow}"></div>
      </div>
    </div>
    <div v-show="collapseShow">
      <slot name="collapseContent"></slot>
    </div>
    <div>
      <slot name='toggleContent'>
    </div>
  </div>

</template>

<script>
export default {
  vuex:{
    getters: {
      langId: ({Lang})=>Lang.langId,
      Lang:({Lang})=>Lang.lang
    }
  },
  props:{
    clickPanel:{
      type:Function,
      default:()=>{}
    },
    collapseShow:{
      type:Boolean,
      default:false,
    },
    hasCollapse:{
      type:Boolean,
      default:true
    },
    active:{
      type:Boolean,
      default:false,
    },
    fixHeight:{
      type:Boolean,
      default:true
    }
  },
  data: function () {
    return {
    }
  },
  computed: {},
  ready: function () {
    console.log(this.clickPanel)
  },
  attached: function () {},
  methods: {
    arrowClick:function(){
      this.collapseShow = !this.collapseShow;
      this.active = !this.active;
    }
  },
  components: {}
}
</script>

<style lang="sass">
  @import "../../public/css/common.scss";
  .m-collapse-panel{
    border-top: 1px solid #454545;
  }
</style>
